<script setup lang="ts">
import { NFlex } from "naive-ui";
import { NForm } from "naive-ui";
import { NFormItem } from "naive-ui";
import { NInput } from "naive-ui";
import { NIcon } from "naive-ui";
import { NButton } from "naive-ui";
import { NUpload } from "naive-ui";
import { NUploadDragger } from "naive-ui";
import { NText } from "naive-ui";
import { NP } from "naive-ui";
import { useDialog } from "naive-ui";

import { ref, h } from "vue";

import { ArchiveOutline as ArchiveIcon } from "@vicons/ionicons5";

const dialog = useDialog();

const iconUrl = ref<string>("");
iconUrl.value = "https://cdn.jsdelivr.net/gh/naive-ui/tailwind-demo/avatar.png";

const changeIcon = async (): Promise<void> => {
  dialog.create({
    title: "上传头像",
    content: () => {
      return h(
        NUpload,
        {
          "dradirectory-dnd": true,
        },
        [
          h(NUploadDragger, {}, [
            h("div", { style: "margin-bottom: 12px" }, [
              h(NIcon, { size: "48", depth: "3" }, [h(ArchiveIcon)]),
            ]),
            h(
              NText,
              { style: "font-size: 16px" },
              "点击或者拖动文件到该区域来上传"
            ),
            h(
              NP,
              { depth: "3", style: "margin: 8px 0 0 0" },
              "请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码"
            ),
          ]),
        ]
      );
    },
    positiveText: "上传",
    onPositiveClick: () => {
      iconUrl.value =
        "https://cdn.jsdelivr.net/gh/naive-ui/tailwind-demo/avatar.png";
    },
    onNegativeClick: () => {},
  });
};
</script>

<template>
  <n-flex justify="center" class="w-full h-full pt-5">
    <n-form class="w-2/3">
      <n-form-item label="用户名">
        <n-icon :size="60" @click="changeIcon">
          <img :src="iconUrl" class="rounded-full" />
        </n-icon>
        <n-input placeholder="请输入用户名" />
      </n-form-item>
      <n-form-item label="个人签名">
        <n-input type="textarea" placeholder="这里什么都没有" />
      </n-form-item>
      <n-form-item label="邮箱">
        <n-input placeholder="请输入邮箱" />
      </n-form-item>
      <n-form-item class="w-full">
        <span class="flex w-full justify-end pr-10 gap-5">
          <n-button type="primary">保存</n-button>
          <n-button type="warning">取消</n-button>
        </span>
      </n-form-item>
    </n-form>
  </n-flex>
</template>

<style scoped></style>
